<template>
  <div class="record">
    <div class="record-search-div">

      <el-radio v-model="searchType" :label="1">查询未回复(默认)</el-radio>
      <el-radio v-model="searchType" :label="2">查询全部</el-radio>
    </div>

    <div class="record_timeline">
      <el-timeline>
        <span v-if="records.length == 0" class="text-aligin:center;">暂无数据  </span>

        <el-timeline-item timestamp="2018/4/12" placement="top" v-for="record in records" :key="record.mesId">
          <el-card class="round">
            <div v-html="JSON.parse(record.mesStuInfo).content"></div>
            <p><i class="el-icon-chat-line-square">
              </i> {{record.stuName}} 提交于 {{String(record.createTime).replace("T", " ")}}
              </p>

              <div class="reply-div" @click="replyStu(record.mesId)" v-if="record.mesTeaInfo === ''">回复学生</div>
              <div v-else>
                我的回复：
                <div v-html="JSON.parse(record.mesTeaInfo).content" >
                </div>
              </div>

              <el-dialog title="回复学生的信息" :visible.sync="dialogVisible">
                  <editor @editorContent="getContent"></editor>
                  <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="reply">确 定</el-button>
                </span>
              </el-dialog>

          </el-card>
        </el-timeline-item>

      </el-timeline>
    </div>
  </div>
</template>

<script>
import { getMyMsgRecord,replyStuRecord } from '../../api/user';
import Editor from '../../components/Editor.vue';
export default {
  components: { Editor },
    name:"ReplyRecord",
    data() {
      return {
        records:[],
        searchType:1,
        dialogVisible: false,
        replyContent:'',
        msgId:"",
      }
    },
    methods: {
      replyStu(msgId){
        this.msgId = msgId
        this.dialogVisible = true
      },
      getContent(content) {
        this.replyContent = content
      },
      getRecords() {
        getMyMsgRecord().then(res => {
          if (res.code == 200) {
            this.records = res.data.records
          }
        })
      },
      reply() {
        this.dialogVisible = false
        replyStuRecord({msgId:this.msgId, content:this.replyContent})
        .then(res => {
                if (res.code == 200) {
                        this.$notify({
                            title: '成功',
                            message: '回复成功',
                            type: 'success'
                        });
                }else {
                        this.$notify.error({
                            title: '错误',
                            message: '回复失败'
                        });
                }
            }).catch(err => {
                this.$notify.error({
                    title: '错误',
                    message: '回复失败'
                });
            })
      }
    },
    mounted() {
      this.getRecords()
    }
};
</script>

<style>
.record{
    margin: 2%;
    width: 96%;
    min-height: 600px;
    /* height: 90%; */
    background-color: white;
    border-radius: 15px;
    
    /* box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); */

    /* 子容器 */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* position: relative; */
    /* z-index: 0.5; */
    align-items: center;
}

.record-search-div {
  align-self: flex-start;
  margin-left: 14.2%;
}

.record_timeline {
  margin-top: 2%;
    width: 80%;
    /* position: relative; */

}

.reply-div {
  color: #FED049;
  cursor: pointer;
}

.el-timeline-item__node {
    background-color: #FED049 !important;
}
.el-timeline-item__tail {
    border-left:2px solid rgba(254, 208, 73, 0.8);
}
</style>